<template>
	<el-dropdown trigger="click" @command="handleCommand">
		<div class="dropdown">
			<el-avatar :src="'/api/file/'+userInfo.avatar"></el-avatar>&nbsp;
			<strong>{{userInfo.nickname}}</strong>
		</div>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item command="a">个人信息</el-dropdown-item>
			<el-dropdown-item command="logout">注销</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
	import LoginApi from "../../api/login.js"
	export default {
		data() {
			return{
				userInfo:{}
			}
		},
		methods: {
			handleCommand(command) {
				if("logout" == command){
					this.logout()
				}
			},
			async logout() {
				const res = await LoginApi.logout("/Login/logout")
				if(res.code==200){
					localStorage.removeItem("userInfo");
					localStorage.removeItem("token");
					this.$router.push("/Login");
					this.$message({
					    showClose: true,
					    message: '注销成功',
					    type: 'success'
					});
				}
				
			},
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
		}
	}
</script>

<style scoped lang="scss">
	.el-dropdown {
		position: absolute;
		right: 4%;
		top: 20%;
		transform: translateY(-6%);

		.dropdown {
			display: flex;
			align-items: center;
		}
	}
</style>